import React, { Component } from "react";
import { Icon, Card, Select, Input, Button, Table } from "antd";
const { Option } = Select;
class detail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const columns = [
      {
        title: "外联ESC",
        dataIndex: "name",
        key: "name",
        render: (str, column, index) => {
          if (column.name) {
            let snArray = [];
            snArray = str.split(";");
            str = snArray.join("\n");
            let br = <br></br>;
            let result = null;
            if (snArray.length >= 2) {
              for (let i = 0; i < snArray.length; i++) {
                if (i === 0) {
                  result = snArray[i];
                } else {
                  result = (
                    <span>
                      {result}
                      {br}
                      {snArray[i]}
                    </span>
                  );
                }
              }
              str = <div>{result}</div>;
            }
          }
          let html = <label>{str}</label>;

          return html;
        },
      },
      {
        title: "发生时间",
        dataIndex: "time",
        key: "time",
        render: (str, column, index) => {
          if (column.time) {
            let snArray = [];
            snArray = str.split(";");
            str = snArray.join("\n");
            let br = <br></br>;
            let result = null;
            if (snArray.length >= 2) {
              for (let i = 0; i < snArray.length; i++) {
                if (i === 0) {
                  result = snArray[i];
                } else {
                  result = (
                    <span>
                      {result}
                      {br}
                      {snArray[i]}
                    </span>
                  );
                }
              }
              str = <div>{result}</div>;
            }
          }
          let html = <label>{str}</label>;

          return html;
        },
      },
      {
        title: "访问流量",
        dataIndex: "traffic",
        key: "traffic",
        render: (str, column, index) => {
          if (column.traffic) {
            let snArray = [];
            snArray = str.split(";");
            str = snArray.join("\n");
            let br = <br></br>;
            let result = null;
            if (snArray.length >= 2) {
              for (let i = 0; i < snArray.length; i++) {
                if (i === 0) {
                  result = snArray[i];
                } else {
                  result = (
                    <span>
                      {result}
                      {br}
                      {snArray[i]}
                    </span>
                  );
                }
              }
              str = <div>{result}</div>;
            }
          }
          let html = <label>{str}</label>;

          return html;
        },
      },
      {
        title: "请求次数",
        key: "requests",
        dataIndex: "requests",
      },

      {
        title: "建议操作",
        dataIndex: "handle",
        render: () => <Button type="primary">查看日志</Button>,
      },
    ];

    const data = [
      {
        key: "1",
        name: "公：192.163.168.cc;私：6486512",
        time: "首次：2021-09-08/9：20：30;首次：2021-09-09/9：30：20",
        traffic: "请求：191MB;响应：82MB",
        requests: "79.31k",
      },
    ];
    const title = (
      <div>
        <Icon type="arrow-left" onClick={() => this.props.history.goBack()} />
        &nbsp;&nbsp;
        <span>外联域名</span>
      </div>
    );
    return (
      <Card title={title}>
        <div>
          <div
            style={{
              background: "#ececec",
              height: "40px",
              lineHeight: "40px",
            }}
          >
            <Icon type="file-done" style={{ color: "blue", fontSize: 16 }} />
            &nbsp;
            <span>基础信息</span>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              height: "200px",
              alignItems: "center",
            }}
          >
            <div>
              <div style={{ color: "blue" }}>
                <Icon type="message" />
                <span>目的信息</span>
              </div>
              <div style={{ margin: "20px 0" }}>域名：www.baidu.com</div>
              <div style={{ margin: "20px 0" }}>协议：SMTP</div>
            </div>
            <div style={{ fontSize: "20px" }}>.......................</div>
            <div>
              <div style={{ color: "blue" }}>
                <Icon type="message" />
                <span>安全现状</span>
              </div>
              <div style={{ margin: "20px 0" }}>分类：谷歌</div>
              <div style={{ margin: "20px 0" }}>标签：-</div>
            </div>
            <div style={{ fontSize: "20px" }}>.......................</div>
            <div>
              <div style={{ color: "blue" }}>
                <Icon type="message" />
                <span>安全建议</span>
              </div>
              <div style={{ margin: "20px 0" }}>放行</div>
              {/* <div style={{ margin: "20px 0" }}>协议：SMTP</div> */}
            </div>
          </div>
          <div
            style={{
              background: "#ececec",
              height: "40px",
              lineHeight: "40px",
            }}
          >
            <Icon type="file-done" style={{ color: "blue", fontSize: 16 }} />
            &nbsp;
            <span>资产影响</span>
          </div>
          <div style={{ margin: "10px 0" }}>
            <Select style={{ width: "150px" }} defaultValue="Home">
              <Option value="Home">外联ECS公网IP</Option>
              <Option value="Company">Company</Option>
            </Select>
            <Input style={{ width: 200 }} />
            <Button type="primary">搜索</Button>
          </div>
          <Table columns={columns} dataSource={data} />
        </div>
      </Card>
    );
  }
}

export default detail;
